<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教材版本列表</title>
    <link href="../assets/css/tailwind.css" rel="stylesheet">
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <script src="../assets/js/chart.umd.min.js"></script>
    <!-- 原始样式已合并到公共配置文件 src/input.css 中 -->
    <!-- 请勿删除此注释，保留原始样式记录 -->
    <!--
    <style>
        /* 图表容器样式 */
        .chart-container {
            position: relative;
            transition: all 0.3s ease;
        }
        
        .chart-container:hover {
            transform: translateY(-2px);
        }
        
        /* 按钮悬停效果 */
        .chart-btn {
            transition: all 0.2s ease;
        }
        
        .chart-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        /* 卡片悬停效果 */
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        /* 表格行悬停效果 */
        .table-hover {
            transition: background-color 0.2s ease;
        }
        
        /* 加载动画 */
        .chart-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #6B7280;
        }
        
        .chart-loading::after {
            content: '';
            width: 20px;
            height: 20px;
            border: 2px solid #E5E7EB;
            border-top: 2px solid #3B82F6;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-left: 8px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 响应式图表 */
        @media (max-width: 768px) {
            .chart-container {
                height: 250px !important;
            }
        }
        
        /* 图表工具提示样式 */
        .chartjs-tooltip {
            background: rgba(0, 0, 0, 0.9) !important;
            border-radius: 8px !important;
            border: 1px solid #3B82F6 !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        }
    </style>
    -->
</head>

<body class="bg-gray-100 font-sans text-gray-800">
    <div class="min-h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
            <div class="container mx-auto px-0 py-3 flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                    <h1 class="text-xl font-bold text-primary flex items-center">
                        <i class="fa fa-book mr-2"></i>
                        <span>睿途教育</span>
                    </h1>
                </div>

                <div class="hidden md:flex items-center space-x-6">
                    <!-- 控制面板 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-tachometer mr-1"></i> 控制面板
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-dashboard mr-2"></i> 仪表盘
                                </a>
                                <a href="dashboard/data-overview.html"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 数据概览
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tasks mr-2"></i> 任务管理
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 教材管理 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 font-medium border-b-2 border-primary pb-1 flex items-center">
                            <i class="fa fa-book mr-1"></i> 教材管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-list mr-2"></i> 版本管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-sitemap mr-2"></i> 章节管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-lightbulb-o mr-2"></i> 知识点管理
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-primary bg-primary/10 font-medium">
                                    <i class="fa fa-exchange mr-2"></i> 版本对比
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 题库管理 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-database mr-1"></i> 题库管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-question-circle mr-2"></i> 题目管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tags mr-2"></i> 标签管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-filter mr-2"></i> 筛选规则
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-upload mr-2"></i> 批量导入
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 组卷系统 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-files-o mr-1"></i> 组卷系统
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-magic mr-2"></i> 智能组卷
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-edit mr-2"></i> 手动组卷
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-copy mr-2"></i> 试卷模板
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-history mr-2"></i> 历史试卷
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 数据分析 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-bar-chart mr-1"></i> 数据分析
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-pie mr-2"></i> 学习分析
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-bar mr-2"></i> 成绩统计
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 趋势分析
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-file-text mr-2"></i> 报告生成
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 系统设置 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-cog mr-1"></i> 系统设置
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-users mr-2"></i> 用户管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-shield mr-2"></i> 权限设置
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-database mr-2"></i> 数据备份
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-cogs mr-2"></i> 系统配置
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <input type="text" placeholder="搜索教材版本、章节或知识点..."
                            class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>

                    <div class="relative">
                        <button class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-bell text-xl"></i>
                            <span
                                class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                        </button>
                    </div>

                    <div class="flex items-center space-x-2 cursor-pointer group">
                        <img src="https://picsum.photos/id/64/40/40" alt="用户头像"
                            class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                        <span class="hidden md:inline font-medium">张老师</span>
                        <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="flex-1 container mx-auto px-4 py-6">
            <!-- 面包屑导航 -->
            <div class="flex items-center text-sm text-gray-500 mb-4">
                <a href="#" class="hover:text-primary">首页</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <a href="#" class="hover:text-primary">教材管理</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <span class="text-primary font-medium">教材版本列表</span>
            </div>
            <!-- 页面标题 -->
            <div class="mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">教材版本列表</h2>
                <p class="text-gray-500 mt-1">管理系统中的所有教材版本，支持添加、编辑和删除操作</p>
            </div>

            <!-- 筛选和搜索 -->
            <div class="bg-white rounded-lg shadow-sm p-5 mb-6">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">教材版本名称</label>
                        <input type="text" placeholder="输入教材版本名称" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">学科</label>
                        <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all">
                            <option value="">全部学科</option>
                            <option value="math">数学</option>
                            <option value="chinese">语文</option>
                            <option value="english">英语</option>
                            <option value="physics">物理</option>
                            <option value="chemistry">化学</option>
                            <option value="biology">生物</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">适用年级</label>
                        <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all">
                            <option value="">全部年级</option>
                            <option value="grade1">一年级</option>
                            <option value="grade2">二年级</option>
                            <option value="grade3">三年级</option>
                            <option value="grade4">四年级</option>
                            <option value="grade5">五年级</option>
                            <option value="grade6">六年级</option>
                            <option value="junior">初中</option>
                            <option value="senior">高中</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all">
                            <option value="">全部状态</option>
                            <option value="active">启用</option>
                            <option value="inactive">禁用</option>
                            <option value="draft">草稿</option>
                        </select>
                    </div>
                </div>
                <div class="flex flex-wrap justify-between mt-4 gap-4">
                    <div class="flex items-center space-x-4">
                        <button class="px-4 py-2 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
                            <i class="fa fa-filter mr-1"></i> 高级筛选
                        </button>
                        <button class="px-4 py-2 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
                            <i class="fa fa-sort mr-1"></i> 排序
                        </button>
                    </div>
                    <div>
                        <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            <i class="fa fa-search mr-1"></i> 搜索
                        </button>
                        <button class="px-4 py-2 bg-success text-white rounded-lg hover:bg-success/90 transition-colors ml-2">
                            <i class="fa fa-plus mr-1"></i> 添加教材版本
                        </button>
                    </div>
                </div>
            </div>

            <!-- 数据统计卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
                <div class="bg-white rounded-lg shadow-sm p-5 flex items-center">
                    <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-primary mr-4">
                        <i class="fa fa-book text-xl"></i>
                    </div>
                    <div>
                        <p class="text-gray-500 text-sm">教材版本总数</p>
                        <p class="text-2xl font-bold">50</p>
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-5 flex items-center">
                    <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-success mr-4">
                        <i class="fa fa-check-circle text-xl"></i>
                    </div>
                    <div>
                        <p class="text-gray-500 text-sm">已发布</p>
                        <p class="text-2xl font-bold">30</p>
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-5 flex items-center">
                    <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-warning mr-4">
                        <i class="fa fa-clock-o text-xl"></i>
                    </div>
                    <div>
                        <p class="text-gray-500 text-sm">审核中</p>
                        <p class="text-2xl font-bold">10</p>
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-5 flex items-center">
                    <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-4">
                        <i class="fa fa-pencil text-xl"></i>
                    </div>
                    <div>
                        <p class="text-gray-500 text-sm">草稿</p>
                        <p class="text-2xl font-bold">10</p>
                    </div>
                </div>
            </div>

            <!-- 教材版本列表 -->
            <div class="bg-white rounded-lg shadow-sm p-5 mb-6">
                <div class="flex justify-between items-center mb-5">
                    <h3 class="font-semibold text-gray-800">教材版本列表</h3>
                    <div class="flex items-center space-x-2">
                        <span class="text-sm text-gray-500">显示方式：</span>
                        <button id="cardViewBtn" class="p-2 text-primary bg-primary/10 rounded">
                            <i class="fa fa-th-large"></i>
                        </button>
                        <button id="listViewBtn" class="p-2 text-gray-400 hover:text-gray-600 rounded hover:bg-gray-100">
                            <i class="fa fa-list"></i>
                        </button>
                    </div>
                </div>

                <!-- 教材版本卡片网格 -->
                <div id="textbookVersionViewContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- 教材版本卡片 1 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden card-hover">
                        <div class="relative">
                            <img src="https://picsum.photos/id/24/800/400" alt="高中数学必修一版本1" class="w-full h-48 object-cover">
                            <div class="absolute top-3 right-3">
                                <span class="px-2 py-1 text-xs bg-success text-white rounded-full">已发布</span>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex justify-between items-start mb-2">
                                <h4 class="font-semibold text-lg">高中数学必修一版本1</h4>
                                <span class="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">数学</span>
                            </div>
                            <p class="text-gray-600 text-sm mb-3 line-clamp-2">此版本涵盖高中数学必修一的全部内容，关联具体章节、小结和知识点，适合高中一年级学生使用。</p>
                            <div class="flex justify-between items-center text-sm text-gray-500 mb-3">
                                <span><i class="fa fa-user mr-1"></i> 王教授</span>
                                <span><i class="fa fa-calendar mr-1"></i> 2025-03-15</span>
                                <span><i class="fa fa-eye mr-1"></i> 1284</span>
                            </div>
                            <div class="flex justify-between">
                                <button class="px-3 py-1 text-sm bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                                    查看详情
                                </button>
                                <div class="flex space-x-1">
                                    <button class="p-1.5 text-gray-500 hover:text-primary rounded hover:bg-primary/10 transition-colors" title="编辑">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="p-1.5 text-gray-500 hover:text-danger rounded hover:bg-danger/10 transition-colors" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                    <button class="p-1.5 text-gray-500 hover:text-success rounded hover:bg-success/10 transition-colors" title="复制">
                                        <i class="fa fa-copy"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 教材版本卡片 2 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden card-hover">
                        <div class="relative">
                            <img src="https://picsum.photos/id/25/800/400" alt="高中语文必修一版本1" class="w-full h-48 object-cover">
                            <div class="absolute top-3 right-3">
                                <span class="px-2 py-1 text-xs bg-success text-white rounded-full">已发布</span>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex justify-between items-start mb-2">
                                <h4 class="font-semibold text-lg">高中语文必修一版本1</h4>
                                <span class="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">语文</span>
                            </div>
                            <p class="text-gray-600 text-sm mb-3 line-clamp-2">该版本精选了经典现代文和文言文，关联章节、小结和知识点，培养学生的阅读理解和写作能力。</p>
                            <div class="flex justify-between items-center text-sm text-gray-500 mb-3">
                                <span><i class="fa fa-user mr-1"></i> 李老师</span>
                                <span><i class="fa fa-calendar mr-1"></i> 2025-01-20</span>
                                <span><i class="fa fa-eye mr-1"></i> 1562</span>
                            </div>
                            <div class="flex justify-between">
                                <button class="px-3 py-1 text-sm bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                                    查看详情
                                </button>
                                <div class="flex space-x-1">
                                    <button class="p-1.5 text-gray-500 hover:text-primary rounded hover:bg-primary/10 transition-colors" title="编辑">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="p-1.5 text-gray-500 hover:text-danger rounded hover:bg-danger/10 transition-colors" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                    <button class="p-1.5 text-gray-500 hover:text-success rounded hover:bg-success/10 transition-colors" title="复制">
                                        <i class="fa fa-copy"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 教材版本卡片 3 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden card-hover">
                        <div class="relative">
                            <img src="https://picsum.photos/id/26/800/400" alt="高中英语必修一版本1" class="w-full h-48 object-cover">
                            <div class="absolute top-3 right-3">
                                <span class="px-2 py-1 text-xs bg-warning text-white rounded-full">审核中</span>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex justify-between items-start mb-2">
                                <h4 class="font-semibold text-lg">高中英语必修一版本1</h4>
                                <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full">英语</span>
                            </div>
                            <p class="text-gray-600 text-sm mb-3 line-clamp-2">此版本围绕日常生活主题展开，关联相关章节、小结和知识点，提升学生英语听说读写能力。</p>
                            <div class="flex justify-between items-center text-sm text-gray-500 mb-3">
                                <span><i class="fa fa-user mr-1"></i> 张老师</span>
                                <span><i class="fa fa-calendar mr-1"></i> 2025-04-05</span>
                                <span><i class="fa fa-eye mr-1"></i> 942</span>
                            </div>
                            <div class="flex justify-between">
                                <button class="px-3 py-1 text-sm bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                                    查看详情
                                </button>
                                <div class="flex space-x-1">
                                    <button class="p-1.5 text-gray-500 hover:text-primary rounded hover:bg-primary/10 transition-colors" title="编辑">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="p-1.5 text-gray-500 hover:text-danger rounded hover:bg-danger/10 transition-colors" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                    <button class="p-1.5 text-gray-500 hover:text-success rounded hover:bg-success/10 transition-colors" title="复制">
                                        <i class="fa fa-copy"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        
        <!-- 页脚 -->
        <footer class="bg-white border-t border-gray-200 py-4">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="text-center md:text-left mb-4 md:mb-0">
                        <p class="text-sm text-gray-500">© 2025 教材资源管理系统. 保留所有权利.</p>
                    </div>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-question-circle mr-1"></i> 帮助中心
                        </a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-file-text-o mr-1"></i> 使用条款
                        </a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-shield mr-1"></i> 隐私政策
                        </a>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</body>

</html>